<template>
  <div class="taskDetail-wrap">
    <div class="title-top-box">
      <img src="../../assets/images/taskadd/icn.png" @click="clickBack" />
      <h2 v-if="taskDetails.taskInfo">{{ taskDetails.taskInfo.title }}</h2>
      <p>凑四个字</p>
    </div>
  </div>
  <div class="editLine">
    <van-tag class="taskStateTag" type="primary" size="large" v-if="taskDetails.taskInfo">{{
      taskDetails.taskInfo.state
    }}</van-tag>
    <img src="../../assets/images/taskdetail/edit.png" @click="clickEdit" />
  </div>
  <div class="task-detail">
    <div class="taskDetailTitle">
      <p>任务详情</p>
    </div>
    <div class="taskDetailContent">
      <div>
        <p class="grey">任务编号</p>
        <p class="right" v-if="taskDetails.taskInfo">{{ taskDetails.taskInfo.id }}</p>
      </div>
      <div>
        <p class="grey">任务内容</p>
        <p class="right" v-if="taskDetails.taskInfo">{{ taskDetails.taskInfo.content }}</p>
      </div>
      <div>
        <p class="grey">优先等级</p>
        <p class="right">
          <van-tag v-if="taskDetails.taskInfo" :color="taskDetails.taskInfo.tag.tagColor" size="large"
            :text-color="taskDetails.taskInfo.tag.textColor" style="padding: 0.5rem">{{ taskDetails.taskInfo.tag.tagText
            }}</van-tag>
        </p>
      </div>
      <div>
        <p class="grey">工作分类</p>
        <p class="right" v-if="taskDetails.taskInfo">{{ taskDetails.taskInfo.classify }}</p>
      </div>
      <div>
        <p class="grey">创建人&nbsp;&nbsp;</p>
        <p class="right" v-if="taskDetails.taskInfo">{{ taskDetails.taskInfo.createName }}</p>
      </div>
      <div>
        <p class="grey">执行人&nbsp;&nbsp;</p>
        <p class="right" v-if="taskDetails.executors">{{ taskDetails.executors[0].empName }}...</p>
      </div>
      <van-cell is-link @click="showPopup">查看全部</van-cell>
      <van-popup class="executorsPopup" v-model:show="show" style="width: 90%; padding: 10pt; border-radius: 24pt">
        <h3>执行人</h3>
        <div class="ex-box" v-for="(item, index) in taskDetails.executors" :key="index">
          <p>
            <span>{{ index + 1 }} {{ item.empName }}</span><span>{{ item.state }}</span>
            <span v-if="item.state != '未完成'">{{
              item.updateTime }}
            </span>
          </p>
        </div>
      </van-popup>
      <div class="createTime">
        <img src="../../assets/images/taskdetail/date.png" class="date" />
        <p class="right" v-if="taskDetails.taskInfo">创建于 {{ taskDetails.taskInfo.createTime }}</p>
      </div>
      <div class="deadlineTime">
        <img src="../../assets/images/taskdetail/date.png" class="date" />
        <p class="right" v-if="taskDetails.taskInfo">截至于 {{ taskDetails.taskInfo.deadline }}</p>
      </div>
    </div>
  </div>
  <div class="taskAnnex">
    <div class="taskAnnexTitle" style="margin-bottom: 15pt">
      <p>任务附件({{ taskNumber }})</p>
    </div>
    <!-- 附件内容 -->
    <!-- v-if="taskNumber" -->
    <div class="taskAnnexContent">
      <!-- 任务录音模板 -->
      <div class="record-item" v-for="(item, index) in taskDetails.files" :key="index">
        <img src="../../assets/images/taskdetail/record.png" />
        <p>
          <span style="display: block; font-size: 14pt">任务录音</span>
          <span style="font-size: 1rem; color: #999999">{{ fileSizes(item.fileSize) }} {{ isFile(item.fileName) }}</span>
        </p>
        <img src="../../assets/images/taskdetail/operate.png" class="operate" @click="showRecord = true" />
        <van-share-sheet v-model:show="showRecord" title="" :options="options" @select="onRecord" />
      </div>
      <hr />
      <!-- 任务图片模板 -->
      <div class="image-item" v-for="(item, index) in taskDetails.images" :key="index">
        <img src="../../assets/images/taskdetail/images.png" />
        <p>
          <span style="display: block; font-size: 14pt">任务图片</span>
          <span style="font-size: 1rem; color: #999999">{{ fileSizes(item.imageSize) }} {{ isFile(item.imageName)
          }}</span>
        </p>
        <img src="../../assets/images/taskdetail/operate.png" class="operate" @click="showImage = true" />
        <van-share-sheet v-model:show="showImage" title="" :options="options" @select="onImage(item.imagePath)" />
      </div>
      <div class="btn-box">
            <van-button type="primary" color="#3F8CFF" @click="submit">创建任务</van-button>
        </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";
import { taskDetail } from '../../api/index'
import 'vant/es/toast/style';



const route = useRoute()
const router = useRouter();

const dialogTitle = ref()
const taskID = route.query.id
const taskDetails = ref({
  // id: "num12141",
  // title: "任我行移动端",
  // createName: "赵健",
  // content:
  //   "考虑登录和注册的UX交互形式，使用线框创建流程。完成后，展示给团队并讨论。将源附加到任务。虑登录和注册的UX，使用线框创建流程。完成后，展示给团队并讨论。将源附加到任务列表。", //任务描述
  // classify: "",
  // priority: 2,
  // type: "质量安全",
  // reminderTime: "", //时间提醒
  // createtime: "2023-03-21 12:00:00",
  // deadline: "2023-03-23 12:00:00",
  // state: 0, //任务状态 0待办 1已办 2超期未完成
  // imageUrl: [], //图片地址
  // recordUrl: [], //录音地址
  // executors: [],
})


// // 路由离开前的操作
// onBeforeRouteLeave((to, from, next) => {
//   // 判断数据是否有更改
//   console.log(to.name, 'to');
//   console.log(from.name, 'from');
//   if (from.name == 'taskDetail') {
//     if (to.name == 'taskAdd') {
//       to.meta.keepAlive = false;
//     } else {

//     }
//   }
//   next();
// });


//附件相关
const taskNumber = ref()

//判断文件大小
const fileSizes = (val) => {
  if (val > 1024000) {
    return `${Math.round(val / 1024 / 1024)}` + 'MB'
  } else {
    return `${Math.round(val / 1024)}` + 'KB'
  }
}
//判断文件格式
const isFile = (val) => {
  let dotIdx = val.lastIndexOf(".");//获取最后一个.的位置
  let suffix = val.substr(dotIdx + 1);//获取文件后缀
  return suffix
}
const showImage = ref(false);
const options = [
  { name: '下载', icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png' },
];
const showRecord = ref(false)


const onImage = (imagePath) => {
  console.log(imagePath)
}
//附件操作
const onRecord = (option) => {
  console.log(option)
}

const show = ref(false);
const showPopup = () => {
  show.value = true;
  console.log(route.query.id, 'route.query.taskData');
};

const clickBack = () => {
  router.push({
    path: "./taskList",
  });
};
const clickEdit = () => {
  dialogTitle.value = '编辑任务'

  router.push({
    name: "taskAdd",
    query: {
      id: taskID,
      dialogTitle: dialogTitle.value
    }
  });
};

const tagType = (val) => {
  let tag = {};
  // if (val.files || val.images) {
  taskNumber.value = val.files.length + val.images.length
  // }
  console.log(taskNumber.value);
  if (val.taskInfo.priority == 0) {
    tag.tagText = "较低";
    tag.tagColor = "#E0F9F2";
    tag.textColor = "#00D097";
    taskDetails.value.taskInfo.tag = tag;
  } else if (val.taskInfo.priority == 1) {
    tag.tagText = "一般";
    tag.tagColor = "#F4F9FD";
    tag.textColor = "#3F8CFF";
    taskDetails.value.taskInfo.tag = tag;
  } else if (val.taskInfo.priority == 2) {
    tag.tagText = "紧急";
    tag.tagColor = "rgb(235 214 239)";
    tag.textColor = "#C418E6";
    taskDetails.value.taskInfo.tag = tag;
  }
};
const taskState = (val) => {
  let state = {};
  val.executors.forEach(e => {
    if (e.state == 0) {
      e.state = "未完成";
      // taskDetails.value.taskInfo.state = state;
    } else if (e.state == 1) {
      e.state = "已完成";
      // taskDetails.value.taskInfo.state = state;
    } else if (e.state == 2) {
      e.state = "未完成";
      // taskDetails.value.taskInfo.state = state;
    }
  })
  if (val.taskInfo.state == 0) {
    state = "待办任务";
    taskDetails.value.taskInfo.state = state;
  } else if (val.taskInfo.state == 1) {
    state = "已办任务";
    taskDetails.value.taskInfo.state = state;
  } else if (val.taskInfo.state == 2) {
    state = "超期未完成任务";
    taskDetails.value.taskInfo.state = state;
  }
  switch (val.taskInfo.classify) {
    case '0':
      taskDetails.value.taskInfo.classify = '前期工作'
      break;
    case '1':
      taskDetails.value.taskInfo.classify = '质量安全'
      break;
    case '2':
      taskDetails.value.taskInfo.classify = '综合管理'
      break;
    case '3':
      taskDetails.value.taskInfo.classify = '上级交办'
      break;
    case '4':
      taskDetails.value.taskInfo.classify = '对外协调'
      break;
    case '5':
      taskDetails.value.taskInfo.classify = '对上汇报'
      break;
  }
};


const getList =()=>{
  taskDetail(taskID).then(res => {
    taskDetails.value = res.data.data
    taskState(res.data.data)
    tagType(res.data.data)
    console.log(taskDetails.value)
  })
}

onMounted(() => {
  getList()
});
</script>

<style scoped lang="scss">
.title-top-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  img {
    width: 2rem;
    height: 2rem;
    margin-left: -1rem;
  }

  h2 {
    margin-left: 3rem;
    font-size: 1.5rem;
  }

  p {
    visibility: hidden;
  }
}

.editLine {
  margin-top: 8pt;

  .taskStateTag {
    // width: 90pt;
    height: 30pt;
    font-size: 12pt;
    background-color: #deecfd;
    color: #3f8cff;
    border-radius: 8pt;
    margin-left: 25pt;
    padding-left: 20pt;
    padding-right: 20pt;
    // text-align: center;
  }

  img {
    width: 24pt;
    height: 24pt;
    float: right;
    margin-right: 25pt;
  }
}

.task-detail {
  background: #ffffff;
  border-radius: 24pt;
  width: 90%;
  padding: 10pt;
  margin: 15pt;
  font-family: "PingFang SC-Medium", "黑体";

  .taskDetailTitle {
    margin-top: 5pt;
    margin-left: 5pt;

    p {
      font-size: 16pt;
    }
  }

  .taskDetailContent {
    margin-top: 10pt;
    font-size: 13pt;

    p {
      margin-bottom: 10pt;
      display: inline-block;
    }

    .grey {
      color: #666666;
    }

    .right {
      margin-left: 30pt;
    }

    .date {
      vertical-align: middle;
      width: 18pt;
      height: 18pt;
    }
  }
}

.executorsPopup {
  h3 {
    margin: 10pt;
  }

  span {
    font-size: 0.9rem;
    font-weight: lighter;
    margin-left: 10pt;
  }
}

.taskAnnex {
  background: #ffffff;
  border-radius: 24pt;
  width: 90%;
  padding: 10pt;
  margin: 15pt;
  font-family: "PingFang SC-Medium", "黑体";

  .taskAnnexTitle {
    margin-top: 5pt;
    margin-left: 5pt;

    p {
      font-size: 16pt;
    }
  }

  .taskAnnexContent {
    image {
      vertical-align: middle;
      width: 44pt;
      height: 44pt;
    }

    .operate {
      float: right;
    }

    p {
      display: inline-block;
    }

    span {
      margin-left: 15pt;
    }

    hr {
      color: #e6e6e6;
      margin-top: 10pt;
      margin-bottom: 10pt;
    }
  }
}

.image-item {
  margin-bottom: 0.5rem;
}

.btn-box {
    padding: 1rem 2rem;
    margin-top: 1rem;
    width: 100%;
    background-color: #FFFFFF;

    .van-button {
        border-radius: 0.9rem;
        width: 100%;
    }
}
</style>